<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./../../styles/animate.css">
    <link rel="stylesheet" href="../../styles/layout_flex.css">
    <script src="../../js/jquery.mini.js"></script>

    <style>
        /*闪烁一下*/
        .img-anima{
            animation: flash 2s 1 linear 0s;
            width: 100px;
            height: 100px;
            background: blue;
        }
        /*不停闪烁*/
        .img-anima1{
            animation: flash 1s infinite linear 0s;
            width: 100px;
            height: 100px;
        }

        .img-anima2{
            animation: bounceIn 1s 1 linear 0s;
            width: 100px;
            height: 100px;
        }
        .img-anima3{
            animation: bounceIn 1s 1 linear 0s;
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body>
<img src="./images/card-icon.png" class="img-anima flex-x">

<img src="./images/card-icon.png" class="img-anima1 ">

<img src="./images/card-icon.png" class="img-anima2">

<img src="./images/card-icon.png" class="img-anima3">
<h1 class="animated infinite bounce">Example</h1>


</body>
</html>